<template>
  <el-container style="margin-top: 10px">
    <el-header>
      <el-card style="height: 75px">
        <el-button icon="el-icon-plus"
                   size="mini"
                   type="primary"
                   @click="dialogVisible = true">
          添加项目
        </el-button>
      </el-card>
    </el-header>

    <el-main>
      <el-card>
        <el-table v-loading="loading"
                  :data="siwperList">
          <el-table-column prop="sort"
                           label="排序"
                           align="center">
            <template slot-scope="scope">
              <div v-show="!sortShow&& (sortId == scope.row.id) ">
                <el-input v-model="scope.row.sort"
                          size="mini"
                          type="number"
                          @blur="sortInputChange(scope.row)" />
              </div>
              <div v-show="sortShow || (sortId != scope.row.id)"
                   @click="sortClick(scope.row)">
                {{ scope.row.sort }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="封面图">
            <template slot-scope="scope">
              <div>
                <img :src="scope.row.image"
                     alt="封面图">
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="activity_title"
                           label="项目标题" />
          <el-table-column align="center"
                           prop="activity_content"
                           label="项目介绍" />
          <el-table-column align="center"
                           label="项目详情图片">
            <template slot-scope="scope">
              <div>
                <img v-if="scope.row.activity_images[0]"
                     :src="scope.row.activity_images[0]"
                     alt="封面图">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="primary"
                         icon="el-icon-edit"
                         @click="hanldePreview(scope.row.id)">查看</el-button>

              <el-button size="mini"
                         type="danger"
                         icon="el-icon-delete"
                         @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>

    <el-footer style="height: 85px">
      <el-card>
        <el-pagination style="text-align: center;"
                       :current-page="page"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       background
                       @current-change="handleCurrentChange" />
      </el-card>
    </el-footer>
    <el-dialog title="添加项目"
               :visible.sync="dialogVisible"
               @close="dialogClose">
      <el-form ref="dialog"
               :model="addSiwperObj"
               :rules="rule"
               label-position=""
               label-width="120px">
        <el-form-item label="项目标题:"
                      prop="activity_title">
          <el-input v-model="addSiwperObj.activity_title" />
        </el-form-item>
        <el-form-item label="项目内容:"
                      prop="activity_content">
          <el-input v-model="addSiwperObj.activity_content" />
        </el-form-item>
        <el-form-item label="封面图"
                      prop="image">
          <el-upload class="avatar-uploader"
                     :action="upload_url"
                     :show-file-list="false"
                     :on-success="uploadSuccess"
                     :before-upload="beforeUpload"
                     :headers="header">
            <img v-if="addSiwperObj.image"
                 :src="addSiwperObj.image"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon" />
            <span slot="tip"
                  class="el-upload__tip">图片大小不能超过2M</span>
          </el-upload>
        </el-form-item>
        <el-form-item label="项目图片:">
          <div class="uploadContent">
            <div v-for="(item, index) in activity_images_list"
                 class="activeImage"
                 @mouseover="showDel(item)"
                 @mouseleave="hideDel(item)"
                 @click="delActiveImage(item)">
              <div v-if="delActiveIconShowIndex == item"
                   class="delActiveImage">X</div>
              <img :key="index"
                   :src="item">
            </div>
            <el-upload class="avatar-uploader"
                       :action="upload_url"
                       :show-file-list="false"
                       :on-success="uploadListSuccess"
                       :before-upload="beforeUpload"
                       :headers="header">
              <i class="el-icon-plus avatar-uploader-icon" />
              <!-- <span class="el-upload__tip" slot="tip">图片大小不能超过2M</span> -->
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     class="iconfont iconicon_add"
                     @click="addSiwper">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import { addSiwper, getRecordList, delSiwper, detailSiwper, sortSlide } from '@/api/setting'
import { getToken } from '@/utils/auth'
const baseUrl = process.env.VUE_APP_BASE_API
export default {
  data () {
    return {
      delActiveIconShowIndex: 0,
      sortShow: true,
      sortId: '',
      sortChangeNum: 0,
      loading: false,
      dialogVisible: false,
      pickShow: false,
      siwperList: [],
      total: 0,
      page: 1,
      pageSize: 10,
      upload_url: baseUrl + '/admin/user/uploadImage',
      header: {
        Authorization: getToken()
      },
      activity_images_list: [],
      addSiwperObj: {
        activity_title: '',
        activity_content: '',
        activity_images: '',
        image: '',
        type: '2'
      },
      rule: {
        activity_title: [
          { required: true, message: '活动标题为必填项', trigger: 'blur' }
        ],
        activity_content: [
          { required: true, message: '活动内容为必填项', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '活动封面图为必填项', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getRecordList()
  },
  methods: {
    sortClick (row) {
      this.sortShow = false
      this.sortChangeNum = row.sort
      this.sortId = row.id
    },
    showDel (item) {
      this.delActiveIconShowIndex = item
    },
    hideDel (item) {
      this.delActiveIconShowIndex = 0
    },
    delActiveImage (item) {
      var index = this.activity_images_list.findIndex(url => {
        if (url == item) {
          return true
        }
      })

      this.activity_images_list.splice(index, 1)
    },
    sortInputChange (row) {
      this.sortShow = true
      const obj = {
        slide_id: row.id,
        sort: row.sort ? row.sort : 0
      }
      sortSlide(obj).then(res => {
        if (response.code == 200) {
          this.$message.success(res.msg)
          this.getRecordList()
        } else {
          this.$message.error(response.msg)
          row.sort = this.sortChangeNum
        }
      }).catch(res => {
        //
      })
    },
    uploadSuccess (response, file, fileList) {
      if (response.code == 200) {
        this.addSiwperObj.image = response.data.url
      } else {
        this.$message.error(response.msg)
      }
    },
    beforeUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    uploadListSuccess (response, file, fileList) {
      if (response.code == 200) {
        this.activity_images_list.push(response.data.url)
      } else {
        this.$message.error(response.msg)
      }
    },
    getRecordList () {
      this.loading = true
      const params = {
        page: this.page,
        page_size: this.pageSize,
        type: '2'
      }
      getRecordList(params).then(res => {
        this.siwperList = res.data.list
        this.total = res.data.paginate.total
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },
    handleCurrentChange (e) {
      this.page = e
      this.getRecordList()
    },
    picktypechange (e) {
      if (e == 0) {
        this.pickShow = false
        this.addSiwperObj.answer_type = 2
      } else {
        this.pickShow = true
        this.addSiwperObj.answer_type = 1
      }
      this.pick.forEach((item) => {
        item.value = ''
      })
    },
    addSiwper () {
      this.$refs.dialog.validate(valid => {
        if (!valid) {
          return false
        }
        this.addSiwperObj.activity_images = this.activity_images_list.join(',')
        addSiwper(this.addSiwperObj).then(res => {
          this.$message.success(res.msg)
          this.dialogVisible = false
          this.getRecordList()
        }).catch(err => {
          this.dialogVisible = false
        })
      })
    },
    hanldePreview (id) {
      this.dialogVisible = true
      const obj = { slide_id: id }
      detailSiwper(obj).then(res => {
        this.addSiwperObj = res.data
        this.activity_images_list = res.data.activity_images
      })
    },
    handleDelete (id) {
      this.$confirm('确认删除,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果点击了确定 则执行的逻辑
        delSiwper({ slide_id: id }).then(res => {
          this.$message.success(res.msg)
          this.getRecordList()
        })
      })
    },
    dialogClose () {
      this.activity_images_list = []
      this.addSiwperObj = {
        activity_title: '',
        activity_content: '',
        activity_images: '',
        image: '',
        type: '2'
      }
    }
  }
}
</script>

<style>
img {
  width: 100px;
  height: 100px;
}
.uploadContent {
  display: flex;
}
.activeImage {
  width: 100px;
  height: 100px;
  position: relative;
  margin-right: 20px;
}
.delActiveImage {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #bfbbbb;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>
